<template>
  <div class="page">
    <!-- banner 开始 -->
    <div class="swipe_box">
      <div class="left_icon" @click="goBack">
        <img src="@/assets/images/back.png" alt="" />
      </div>
      <div class="banner">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          v-if="getBanner(surroundings.surroundingsPic)"
        >
          <van-swipe-item
            v-for="(item, index) in getImages(surroundings.surroundingsPic)"
            :key="index"
          >
            <li-image :src="item"></li-image>
          </van-swipe-item>
        </van-swipe>
        <img src="@/assets/images/h_banner.png" class="img" alt="" v-else />
      </div>
      <div class="small_btn" v-if="getBanner(surroundings.surroundingsPic)">
        <div class="photo" @click="previewImage(surroundings.surroundingsPic)">
          <img src="@/assets/images/photo.png" class="img" alt="" />
          <span>{{ getImages(surroundings.surroundingsPic).length }}</span>
        </div>
        <!-- <div class="photo">
                <img src="@/assets/images/video.png" class="img" alt="">
                <span>33</span>
              </div> -->
      </div>
    </div>
    <!-- banner end -->

    <!-- 医院信息 开始 -->
    <div class="hospital_info">
      <!-- 关注 开始 -->
      <div
        class="attention"
        :class="oInfo.followedStatus == 1 ? 'attentioned' : ''"
        @click="attention"
      >
        <img
          src="@/assets/images/guanzhu.png"
          class="img"
          alt=""
          v-if="oInfo.followedStatus == 2"
        />
        <span>{{ oInfo.followedStatus == 2 ? "关注" : "已关注" }}</span>
      </div>
      <!-- 关注 end -->

      <!-- 医院头像 开始 -->
      <div class="avatar">
        <li-image
          :src="hospital.logo"
          round
          class="img"
          v-if="hospital.logo"
        ></li-image>
        <img
          src="@/assets/images/avatar/hosp_default_circle.png"
          class="img"
          alt=""
          v-else
        />
        <img
          src="@/assets/images/rz.png"
          class="rz"
          alt=""
          v-if="hospital.hasCertified == 1"
        />
      </div>
      <!-- 医院头像 end -->

      <!-- 医院名称 开始 -->
      <div class="head">
        <h2 class="h2">{{ hospital.name }}</h2>
        <nuxt-link
          :to="`/inquire/hospital/${hospital.qualificationId}`"
          v-if="hospital.qualificationId"
        >
          <img src="@/assets/images/zizhi.png" class="zh" alt="查看资质" />
        </nuxt-link>
      </div>
      <!-- 医院名称 end -->

      <!-- 地址 开始 -->
      <div class="address">
        <div class="info">
          <div class="add">
            {{ hospital.provinceName }}{{ hospital.cityName
            }}{{ hospital.districtName }}{{ hospital.address }}
          </div>
          <div class="time">
            <span>营业中</span>
            <span class="lili_divider"></span>
            <span>营业时间：{{ hospital.businessTime }}</span>
          </div>
        </div>
        <div class="location" @click="goLocation">
          <img src="@/assets/images/location_01.png" alt="" />
        </div>
      </div>
      <!-- 地址 end -->

      <!-- 评分 开始 -->
      <div class="score_box">
        <img src="@/assets/images/star.png" alt="" />
        <span class="num">{{ hospital.initScore }}</span>
        <span class="tips">/患者评论</span>
        <span class="num">{{ commentsList.length }}</span>
      </div>
      <!-- 评分 end -->
    </div>
    <!-- 医院信息 end -->

    <!-- 菜单 开始 -->
    <van-sticky @change="onChange">
      <div class="menu_box">
        <div
          class="cell"
          :class="menuActive == item.id ? 'cell_active' : ''"
          v-for="(item, index) in menus"
          :key="index"
          @click="menuEvent(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </van-sticky>
    <!-- <div class="menu_box_hidden" v-if="isFixed"></div> -->
    <!-- 菜单 end -->

    <!-- 基础信息 开始 -->
    <div class="row_box" ref="infomation">
      <h2 class="h2">
        <nuxt-link :to="`/hospital/base?id=${hospitalId}`" class="a_link">
          <span>基础信息</span>
          <img src="@/assets/images/arrow_right.png" alt="" />
        </nuxt-link>
      </h2>
      <div class="info">
        <div class="cell">
          <span class="name">诊室个数：</span>
          <span class="txt">{{ hospital.outpatientRootCnt }}间</span>
        </div>
        <div class="cell">
          <span class="name">门店面积：</span>
          <span class="txt">{{ hospital.outpatientArea }}㎡</span>
        </div>
        <div class="cell">
          <span class="name">成立时间：</span>
          <span class="txt">{{ hospital.establishDate }}年</span>
        </div>
        <div class="cell">
          <span class="name">牙椅数量：</span>
          <span class="txt">{{ hospital.toothChairCnt }}张</span>
        </div>
        <div class="cell">
          <span class="name">机构类别：</span>
          <span class="txt">{{ hospital.className }}</span>
        </div>
        <div class="cell">
          <span class="name">医保政策：</span>
          <span class="txt">{{
            hospital.medicalInsurancePolicy == 1 ? "支持医保" : "不支持医保"
          }}</span>
        </div>
        <div class="cell long_cell">
          <span class="name">机构简介：</span>
          <span class="txt">{{ hospital.introduce }}</span>
        </div>
      </div>
    </div>
    <!-- 基础信息 end -->

    <!-- 特惠商品 开始 -->
    <div class="row_box" ref="goods" v-if="goodsList && goodsList.length">
      <h2 class="h2">
        <nuxt-link :to="`/hospital/goods?id=${hospitalId}`" class="a_link">
          <span>特惠商品</span>
          <img src="@/assets/images/arrow_right.png" alt="" />
        </nuxt-link>
      </h2>
      <div class="goods_list">
        <HospitalGoods
          v-for="(item, index) in goodsList"
          :key="`goods_${index}`"
          :info="item"
        ></HospitalGoods>
        <div
          class="hidden_doctor"
          v-for="(hitem, hidx) in 3 % goodsList.length"
          :key="`goods_hidden_${hidx}`"
        ></div>
      </div>
    </div>
    <!-- 特惠商品 end -->

    <!-- 医生团队 开始 -->
    <div class="row_box" ref="doctor" v-if="doctorList && doctorList.length">
      <h2 class="h2">
        <nuxt-link :to="`/hospital/doctor/${hospitalId}`" class="a_link">
          <span>医生团队</span>
          <img src="@/assets/images/arrow_right.png" alt="" />
        </nuxt-link>
      </h2>
      <div class="doctor_list">
        <HospitalDoctor
          v-for="(item, index) in doctorList"
          :key="`doctor_${index}`"
          :info="item"
        ></HospitalDoctor>
        <div
          class="hidden_doctor"
          v-for="(hitem, hidx) in 4 - doctorList.length"
          :key="hidx"
        ></div>
      </div>
    </div>
    <!-- 医生团队 end -->

    <!-- 用户案例 开始 -->
    <div class="row_box" ref="case" v-if="caseList && caseList.length">
      <h2 class="h2">
        <nuxt-link :to="`/hospital/case/${hospitalId}`" class="a_link">
          <span>用户案例</span>
          <img src="@/assets/images/arrow_right.png" alt="" />
        </nuxt-link>
      </h2>
      <div class="case_list">
        <template v-for="(item, index) in caseList">
          <user-case
            :info="item"
            :key="`case_${index}`"
            v-if="index < 6"
          ></user-case>
        </template>
      </div>
    </div>
    <!-- 用户案例 end -->

    <!-- 用户评价 开始 -->
    <div class="row_box" ref="evaluate">
      <h2 class="h2">
        <nuxt-link :to="`/hospital/evaluate/${hospitalId}`" class="a_link">
          <span>用户评价</span>
          <img src="@/assets/images/arrow_right.png" alt="" />
        </nuxt-link>
      </h2>

      <div class="evaluate_list">
        <div class="evaluate_title">
          <span class="num">{{ $fomartRate(totalScore.scoreOverall) }}</span>
          <span class="unit">分</span>
          <span class="good">{{ showRateText(totalScore.scoreOverall) }}</span>
          <span class="sp">{{ commentsList.length }}条</span>
          <span class="lili_divider"></span>
          <span class="sp_01"
            >专业{{ $fomartRate(totalScore.scoreProfessional) }}</span
          >
          <span class="sp_01"
            >服务{{ $fomartRate(totalScore.scoreService) }}</span
          >
          <span class="sp_01"
            >环境{{ $fomartRate(totalScore.scoreSurroundings) }}</span
          >
        </div>
        <template v-if="commentsList && commentsList.length">
          <div
            class="evaluate_box"
            v-for="(item, index) in commentsList"
            :key="index"
          >
            <UserEvaluate :info="item"></UserEvaluate>
          </div>
        </template>
      </div>
    </div>
    <!-- 用户评价 end -->

    <!-- 悬浮按钮 开始 -->
    <fixed-menu source="hospital" :id="hospitalId"></fixed-menu>
    <!-- 悬浮按钮 end -->
  </div>
</template>
  <script>
import HospitalGoods from "@/components/goods/hospital_goods.vue";
import HospitalDoctor from "@/components/doctor/hospital_doctor.vue";
import UserCase from "@/components/case/index.vue";
import UserEvaluate from "@/components/evaluate/index.vue";
import {
  IMAGEURL,
  GET_HOSPITAL_INFO,
  GET_HOSPITAL_GOODS,
  GET_HOSPITAL_DOCTORS,
  GET_HOSPITAL_USERCASES,
  GET_HOSPITAL_USERCOMMENTS,
  FOLLOWED_HOSPITAL_INFO,
} from "@/http/interface";
import { ImagePreview, Swipe, SwipeItem, Sticky } from "vant";
import { showRateText } from "@/utils/utils";
export default {
  components: {
    HospitalGoods,
    HospitalDoctor,
    UserCase,
    UserEvaluate,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Sticky.name]: Sticky,
  },
  data() {
    return {
      menus: [
        { name: "信息", id: 1, target: "infomation" },
        { name: "商品", id: 2, target: "infomation" },
        { name: "医生", id: 3, target: "doctor" },
        { name: "案例", id: 4, target: "case" },
        { name: "评价", id: 5, target: "evaluate" },
      ],
      menuActive: 1,
      rate: 8,
      query: this.$router.query,
      hospitalId: "",
      oInfo: {},
      hospital: {},
      appointment: {},
      surroundings: {},
      title: "",
      description: "",
      keywords: "",
      goodsList: [],
      doctorList: [],
      caseList: [],
      commentsList: [],
      totalScore: {},
      showRateText: (str) => {
        return showRateText(str);
      },
      isFixed: false,
    };
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: "description",
          name: "description",
          content: this.description,
        },
        {
          hid: "Keywords",
          name: "Keywords",
          content: this.keywords,
        },
      ],
      link: [
        {
          ref: "canonical",
          href: `${this.$domain}/hospital/detail/${this.hospitalId}`,
        },
      ],
    };
  },
  async asyncData({ query, $axios, params }) {
    let _params = { id: params.id };
    let res = await $axios.get(GET_HOSPITAL_INFO, {
      params: _params,
    });
    console.log(res);

    let oInfo = res.data || {};
    let appointment = oInfo.appointment || {};
    let hospital = oInfo.hospital || {};
    let surroundings = oInfo.surroundings || {};

    // 商品信息
    let ges = await $axios.get(GET_HOSPITAL_GOODS, { params: _params });
    console.log(ges);
    let goodsList = ges.data || [];
    if (goodsList.length > 3) {
      goodsList.length = 3;
    }

    // 医生团队
    let des = await $axios.get(GET_HOSPITAL_DOCTORS, { params: _params });
    let doctorList = des.data || [];
    if (doctorList.length > 4) {
      doctorList.length = 4;
    }

    // 用户案例
    let ces = await $axios.get(GET_HOSPITAL_USERCASES, { params: _params });
    let caseList = ces.data || [];

    // 用户评价
    let comes = await $axios.get(GET_HOSPITAL_USERCOMMENTS, {
      params,
      _params,
    });
    let obj = comes.data || {};
    let commentsList = obj.list || [];
    let totalScore = obj.summary || {};

    return {
      oInfo,
      hospitalId: params.id,
      appointment,
      hospital,
      surroundings,
      title: hospital.seoTitle,
      keywords: hospital.seoKeywords,
      description: hospital.seoDescription,
      goodsList,
      doctorList,
      caseList,
      commentsList,
      totalScore,
    };
  },
  methods: {
    //菜单点击事件
    menuEvent(row) {
      let _target = row.target;
      let _dom = this.$refs[_target];
      if (_dom) {
        _dom.scrollIntoView();
      }
      this.menuActive = row.id;
    },

    // 查看基础信息
    lookBaseInfo() {
      let query = this.$router.query;
      this.$router.push({
        path: "/hospital/base",
        query: query,
      });
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 获取图片
    getImages(str) {
      if (!str) {
        return [];
      }
      let arr = str.split(",");
      return arr;
    },

    // 获取banner封面
    getBanner(str) {
      if (!str) {
        return "";
      }
      let arr = str.split(",");
      let _path = arr[0];
      return _path;
    },

    // 预览图片
    previewImage(str) {
      if (!str) {
        return [];
      }
      let arr = str.split(",");
      let list = [];
      arr.map((k) => {
        k = IMAGEURL + k;
        console.log(k);
        list.push(k);
      });
      ImagePreview(list);
    },

    // 关注
    async attention() {
      let token = this.$cookies.get("token");
      if (!token) {
        this.$router.push({
          path: "/my/login",
        });
        return false;
      }
      let _status = this.hospital.followedStatus;
      let id = this.hospitalId;
      let params = { id: id };
      let res = await this.$axios.get(FOLLOWED_HOSPITAL_INFO, {
        params: params,
      });
      if (res.code == 200) {
        this.$set(this.hospital, "followedStatus", _status == 1 ? 2 : 1);
        this.$set(this.oInfo, "followedStatus", _status == 1 ? 2 : 1);
      }
    },

    // 查看定位
    goLocation() {
      let o = this.hospital || {};
      if (!o.lng || !o.lat) {
        return false;
      }
      this.$router.push({
        path: "/map/location",
        query: {
          lng: o.lng,
          lat: o.lat,
          name: o.name,
        },
      });
    },

    //
    onChange(e) {
      console.log(e);
      this.isFixed = e;
    },
  },
};
</script>
  <style lang="less" scoped>
@import "/assets/styles/hospital/detail.less";
</style>